<template>
	<view class="shop-order-address" @click="chooseAddress">
		<view class="shop-order-address-1">{{curAddress.region || ''}}</view>
		<view class="shop-order-address-2" v-if="curAddress.id">{{curAddress.address}}</view>
		<view class="shop-order-address-2" v-else>请选择收货地址</view>
		<view class="shop-order-address-3">
			<text class="shop-order-address-31">{{curAddress.name || ''}}</text>
			<text class="shop-order-address-32">{{curAddress.phone || ''}}</text>
		</view>
		<text class="shop-order-address-4 iconfont icon-youjiantou"></text>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		name: 'JoyAddress',
		computed: {
			...mapState(['curAddress']),
		},
		methods: {
			// 选择地址
			chooseAddress() {
				let url = '/pages/me/address?choose=1';
				this.$cuNavigateTo(url);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.shop-order-address {
		position: relative;
		background-color: #fff;
		padding: 32rpx 48rpx 32rpx 32rpx;
		&:after {
			position: absolute;
			right: 0;
			bottom: 0;
			left: 0;
			height: 2px;
			background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
			background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
			background-size: 120px;
			content: '';
		}
		.shop-order-address-1, .shop-order-address-3 {
			font-size: 28rpx;
			color: #333;
			line-height: 28rpx;
		}
		.shop-order-address-2 {
			font-size: 32rpx;
			line-height: 40rpx;
			color: #333;
			font-weight: bold;
			margin: 16rpx 0;
		}
		.shop-order-address-3 {
			.shop-order-address-31 {
				padding-right: 8rpx;
			}
			.shop-order-address-32 {
				padding-right: 8rpx;
				color: #000;
			}
		}
		.shop-order-address-4 {
			position: absolute;
			right: 16rpx;
			top: 50%;
			transform: translateY(-50%);
			color: #333;
		}
	}
</style>